<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>简单的移动-小懒猫</title>
		<meta name="keywords" content="关键字,关键字"/>
		<meta name="description" content="描述信息">
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			#box{
				width:640px;margin:100px auto;}
			#box li{
				height:50px;
				background:#ccc;
				margin-top:3px;
				line-height:50px;
				padding-left:5px;width:100%;

			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="ullist">
				<li>1<a href="javascript:void(0);" >上移动</a>&nbsp;<a href="javascript:void(0);" >下移动</a></li>
				<li>2<a href="javascript:void(0);" >上移动</a>&nbsp;<a href="javascript:void(0);" >下移动</a></li>
				<li>3<a href="javascript:void(0);" >上移动</a>&nbsp;<a href="javascript:void(0);" >下移动</a></li>
				<li>4<a href="javascript:void(0);" >上移动</a>&nbsp;<a href="javascript:void(0);" >下移动</a></li>
				<li>5<a href="javascript:void(0);" >上移动</a>&nbsp;<a href="javascript:void(0);" >下移动</a></li>
			</ul>
		</div>
		<script src="/js/dom.js"></script>
		<script>
			function dom(id){
				return document.getElementById(id);
			}
			
			function log(msg){
				return console.log(msg);
			}
			window.onload = function(){
				var liDoms = dom("ullist").children;
				var len = liDoms.length;
				for(var i=0;i<len;i++){
					liDoms[i].children[0].onclick = function(){
						var pDom = this.parentElement;
						var prevDom = pDom.previousElementSibling;
						if(prevDom){
							dom("ullist").insertBefore(pDom,prevDom);
						}else{
							log("没有交换的元素");
							return false;
						}
					}
					
					liDoms[i].children[1].onclick = function(){
						var pDom = this.parentElement;
						var nextDom = pDom.nextElementSibling;
						if(nextDom){
							dom("ullist").insertBefore(nextDom,pDom);
						}else{
							log("没有交换的元素");
							return false;
						}
					}
				}
				
			};
		</script>

	</body>
</html>
